<template>
 <div id="home">
  <header>
   <template v-for="item in liArr">
    <div :key="item.id">
     <img class="img" :src="item.creator.backgroundUrl" />
     <div class="abs">
      <div>
       <p>3222</p>
       <p class="a">听歌数</p>
      </div>
      <div>
       <img class="img1" :src="item.creator.avatarUrl" alt="" />
      </div>
      <div>
       <p>5744</p>
       <p class="a">粉丝数</p>
      </div>
     </div>
     <div class="m">{{ item.creator.nickname }}</div>
     <button>+ 关注</button>
    </div>
   </template>
  </header>
  <nav>
   <ul>
    <h3>歌单({{ naArr.length }})</h3>
    <template v-for="item in naArr">
     <li :key="item.id" @click="xihuang(item.id)">
      <div>
       <img :src="item.coverImgUrl" alt="" />
      </div>
      <div>
       <p>{{ item.name }}</p>
       <p class="p">{{ item.trackCount }}首，播放{{ item.playCount }}次</p>
      </div>
     </li>
    </template>
   </ul>
  </nav>
  <router-link to="/down">
   <main>
    <span>去他的主页</span>
   </main>
  </router-link>
 </div>
</template>

<script>
export default {
 created() {
  console.log(this.$route.query.id);
 },
 data: () => {
  return {
   liArr: [],
   naArr: [],
  };
 },
 methods: {
  async fn() {
   let res = await this._axios.get(
    `/user/playlist?uid=${this.$route.query.id}`
   );
   console.log(res);
   // console.log(res.data.playlist);
   this.liArr = res.data.playlist.slice(0, 1);
   this.naArr = res.data.playlist;
   // console.log(this.liArr);
   // console.log(this.list);
  },
  xihuang(id){
      this.$router.push({ name: "details", query: { id } });
  }
 },
 mounted() {
  this.fn();
 },
};
</script>

<style lang="scss" scoped>
#home {
 header {
  position: relative;
  height: _vw(500);
  div {
   .img {
    z-index: 2;
    width: 100%;
    height: _vw(500);
    float: left;
   }
   .abs {
    position: absolute;
    top: _vw(130);
    left: _vw(110);
    display: flex;
    justify-content: space-around;
    .img1 {
     //    position: absolute;
     //    top: _vw(160);
     //    left: _vw(300);
     border-radius: _vw(150);
     width: _vw(160);
     height: _vw(160);
     z-index: 1;
     margin: 0 _vw(100);
    }
    p {
     color: #fff;
     margin-top: _vw(20);
    }
    .a {
     color: #ffffff99;
     font-size: _vw(24);
     margin-top: 0;
    }
   }
   .m {
    position: absolute;
    top: _vw(300);
    left: _vw(270);
    color: #fff;
   }
   button {
    position: absolute;
    top: _vw(360);
    left: _vw(280);
    color: #fff;
    width: _vw(200);
    height: _vw(60);
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: _vw(40);
   }
  }
 }
 nav {
  ul {
   h3 {
    font-size: _vw(24);
    color: #666;
    padding: _vw(20);
   }
   li {
    display: flex;
    flex-wrap: wrap;
    img {
     padding-right: _vw(20);
     padding-left: _vw(20);
     width: _vw(100);
     height: _vw(100);
    }
    p {
     width: _vw(600);
     height: _vw(40);
     margin-top: _vw(12);
     font-size: _vw(30);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     overflow: hidden;
    }
    .p {
     font-size: _vw(24);
     color: #999999;
    }
   }
  }
 }
 main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: _vw(108);
  text-align: center;
  line-height: _vw(80);
  span {
   display: inline-block;
   width: _vw(600);
   height: _vw(80);
   border: 1px solid red;
   background-color: red;
   border-radius: _vw(50);
   color: #fff;
  }
 }
}
</style>
